<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jq_选项卡</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }

    .web {
        width: 1000px;
        height: 500px;
        margin: 2px auto;
        position: relative;
    }
    ul{
        display: flex;
    }
    ul li{
        width: 20%;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 26px;
    }
    ul li:nth-child(even){
        border-left: 1px solid slategray;
        border-right: 1px solid slategray;
    }
    .xian{
        width: 19%;
        margin: 0 .5%;
        border-top: 2px solid sienna;
        position: absolute;
    }
    dl dd{
        width: 100%;
        height: 398px;
        line-height: 400px;
        text-align: center;
        font-size: 36px;
        position: absolute;
        color: white;
        top: 102px;
        display: none;
    }
    dl dd:nth-child(1){background-color: #878787;}
    dl dd:nth-child(2){background-color: #8877cc;}
    dl dd:nth-child(3){background-color: #87ceeb;}
    dl dd:nth-child(4){background-color: #114444;}
    dl dd:nth-child(5){background-color: #908339;}
</style>

<body>
    <div class="web">
        <ul>
            <li>选项卡01</li>
            <li>选项卡02</li>
            <li>选项卡03</li>
            <li>选项卡04</li>
            <li>选项卡05</li>
        </ul>
        <div class="xian"></div>
        <dl>
            <dd>我是内容01</dd>
            <dd>我是内容02</dd>
            <dd>我是内容03</dd>
            <dd>我是内容04</dd>
            <dd>我是内容05</dd>
        </dl>
    </div>
</body>
<script src="./jq_3.4.1.js"></script>
<script>
    var lis = $("li");
    // console.log(lis);
    lis.mouseenter(function(){
        $(".xian").stop().animate({ left: $(this).position().left}, 300);
        $("dd").hide();
        $("dd").eq($("li").index(this)).slideDown()
    })

</script>
</html>